<template>
  <div class="label-value-unit-wrapper">
    <div v-if="mode === Mode.TB" class="layout-tb">
      <div class="label">{{ label }}</div>

      <div class="value-unit">
        <div class="value">{{ value }}</div>
        <div class="unit">{{ unit }}</div>
      </div>
    </div>

    <div v-if="mode === Mode.LR" class="layout-lr">
      <div class="label">{{ label }}：</div>

      <div class="value-unit">
        <div class="value">{{ value }}</div>
        <div class="unit">{{ unit }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export enum Mode {
  TB,
  LR,
}
export default Vue.extend({
  components: {},
  props: {
    mode: {
      type: Number,
      default: Mode.LR,
    },
    label: {
      type: String,
      default: '',
    },
    value: {
      type: [String, Number],
      default: '',
    },
    unit: {
      type: String,
      default: '',
    },
  },
  data() {
    return { Mode }
  },
})
</script>
<style lang="scss" scoped>
.label-value-unit-wrapper {
  .layout-tb {
    @apply flex flex-col items-center  mb-[15px];

    .label {
      font-size: 14px;
      line-height: 14px;
      margin-bottom: 15px;
    }

    .value-unit {
      font-size: 16px;
      line-height: 16px;
      font-weight: bold;
    }
  }

  .layout-lr {
    @apply flex mb-[10px];

    .label {
      white-space: nowrap;
    }
  }

  .label {
    color: #898faa;
  }

  .value-unit {
    @apply flex items-center;
    color: #4a4a4a;
  }
}
</style>
